<!--内容统计-->

<template>
    <el-container>
        <el-header>
            <el-row :gutter="20" class="header-row">
                <el-col :span="8">
                    <el-input
                            v-model="shortName"
                            placeholder="请输入短篇名称"
                            clearable
                    ></el-input>
                </el-col>
                <el-col :span="8">
                    <el-select
                            v-model="channelType"
                            placeholder="频道类型"
                            clearable
                    >
                        <el-option label="全部" value="all"></el-option>
                        <el-option label="类型1" value="type1"></el-option>
                        <el-option label="类型2" value="type2"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" @click="onSearch">查询</el-button>
                    <el-button @click="onReset">重置</el-button>
                </el-col>
            </el-row>
        </el-header>

        <el-main>
            <el-table :data="paginatedList" style="width: 100%" :default-sort="{ prop: 'uploadTime', order: 'descending' }">
                <el-table-column prop="shortName" label="短篇名称" width="200"></el-table-column>
                <el-table-column prop="shortCode" label="短篇 code" width="120"></el-table-column>
                <el-table-column prop="channelType" label="频道类型" width="120"></el-table-column>
                <el-table-column prop="category" label="分类" width="120"></el-table-column>
                <el-table-column prop="uploadTime" label="上架时间" width="180" sortable="custom"></el-table-column>
                <el-table-column prop="todayViews.total" label="今日观看" sortable="custom">
                    <template v-slot="scope">
                        总人数：{{ scope.row.todayViews.total }}<br />
                        新用户：{{ scope.row.todayViews.new }}
                    </template>
                </el-table-column>
                <el-table-column label="今日充值" sortable="custom">
                    <template v-slot="scope">
                        充值金额：{{ scope.row.todayRecharge.amount }}<br />
                        充值人数：{{ scope.row.todayRecharge.count }}<br />
                        转订率：{{ scope.row.todayRecharge.conversionRate }}<br />
                        复充率：{{ scope.row.todayRecharge.renewalRate }}
                    </template>
                </el-table-column>
                <el-table-column prop="yesterdayViews.total" label="昨日观看" sortable="custom">
                    <template v-slot="scope">
                        总人数：{{ scope.row.yesterdayViews.total }}<br />
                        新用户：{{ scope.row.yesterdayViews.new }}
                    </template>
                </el-table-column>
                <el-table-column label="昨日充值" sortable="custom">
                    <template v-slot="scope">
                        充值金额：{{ scope.row.yesterdayRecharge.amount }}<br />
                        充值人数：{{ scope.row.yesterdayRecharge.count }}<br />
                        转订率：{{ scope.row.yesterdayRecharge.conversionRate }}<br />
                        复充率：{{ scope.row.yesterdayRecharge.renewalRate }}
                    </template>
                </el-table-column>
                <el-table-column prop="cumulativeViews.total" label="累计观看" sortable="custom">
                    <template v-slot="scope">
                        累计人数：{{ scope.row.cumulativeViews.total }}
                    </template>
                </el-table-column>
                <el-table-column label="累计充值" sortable="custom">
                    <template v-slot="scope">
                        充值金额：{{ scope.row.cumulativeRecharge.amount }}<br />
                        充值人数：{{ scope.row.cumulativeRecharge.count }}<br />
                        转订率：{{ scope.row.cumulativeRecharge.conversionRate }}<br />
                        复充率：{{ scope.row.cumulativeRecharge.renewalRate }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <el-link @click="onDetail(scope.row)">详情</el-link>
                    </template>
                </el-table-column>
            </el-table>
<!--            <div class="pagination-container">-->
<!--                <el-pagination-->
<!--                        v-model:current-page="filters.pageNum"-->
<!--                        v-model:page-size="filters.pageSize"-->
<!--                        :page-sizes="[5, 10, 20, 30]"-->
<!--                        :small="small"-->
<!--                        :disabled="disabled"-->
<!--                        :background="background"-->
<!--                        layout="total, sizes, prev, pager, next, jumper"-->
<!--                        :total="total"-->
<!--                        @size-change="handleSizeChange"-->
<!--                        @current-change="handleCurrentChange"-->
<!--                        class="doPage"-->
<!--                />-->
<!--            </div>-->
        </el-main>
    </el-container>
</template>

<script setup>
    import { ref } from 'vue';
    import { ElMessage } from 'element-plus';

    const shortName = ref('');
    const channelType = ref('all');

    const bookList = ref([
        {
            shortName: '致命爱情',
            shortCode: '77164',
            channelType: '女频',
            category: '都市言情',
            uploadTime: '2024-06-01 7:16:29',
            todayViews: { total: 9, new: 2 },
            todayRecharge: { amount: 65.6, count: 4, conversionRate: '44.44%', renewalRate: '0%' },
            yesterdayViews: { total: 265, new: 88 },
            yesterdayRecharge: { amount: 1043.8, count: 82, conversionRate: '30.94%', renewalRate: '0%' },
            cumulativeViews: { total: 324 },
            cumulativeRecharge: { amount: 1263.9, count: 101, conversionRate: '31.17%', renewalRate: '9.9%' },
        },
        {
            shortName: '隐婚第六年',
            shortCode: '77178',
            channelType: '女频',
            category: '都市言情',
            uploadTime: '2024-06-01 7:16:29',
            todayViews: { total: 6, new: 1 },
            todayRecharge: { amount: 19.8, count: 2, conversionRate: '33.33%', renewalRate: '0%' },
            yesterdayViews: { total: 13, new: 4 },
            yesterdayRecharge: { amount: 19.8, count: 2, conversionRate: '15.38%', renewalRate: '0%' },
            cumulativeViews: { total: 14 },
            cumulativeRecharge: { amount: 19.8, count: 2, conversionRate: '14.28%', renewalRate: '0%' },
        },
        {
            shortName: '死后第三年，老公要我给他白月光捐心脏',
            shortCode: '76888',
            channelType: '女频',
            category: '都市言情',
            uploadTime: '2024-06-01 5:16:45',
            todayViews: { total: 6, new: 4 },
            todayRecharge: { amount: 49.5, count: 5, conversionRate: '83.33%', renewalRate: '0%' },
            yesterdayViews: { total: 11, new: 3 },
            yesterdayRecharge: { amount: 49.5, count: 5, conversionRate: '45.45%', renewalRate: '0%' },
            cumulativeViews: { total: 11 },
            cumulativeRecharge: { amount: 49.5, count: 5, conversionRate: '45.45%', renewalRate: '0%' },
        },
    ]);

    const pageSize = ref(10);
    const currentPage = ref(1);
    const paginatedList = ref([]);

    const updatePaginatedList = () => {
        const start = (currentPage.value - 1) * pageSize.value;
        const end = start + pageSize.value;
        paginatedList.value = bookList.value.slice(start, end);
    };

    const handlePageChange = (page) => {
        currentPage.value = page;
        updatePaginatedList();
    };

    const onSearch = () => {
        ElMessage.success('查询成功');
        updatePaginatedList();
    };

    const onReset = () => {
        shortName.value = '';
        channelType.value = 'all';
        ElMessage.success('重置成功');
        updatePaginatedList();
    };

    const onDetail = (row) => {
        ElMessage.info(`查看详情: ${row.uploadTime}`);
    };

    // 初始加载时更新分页列表
    updatePaginatedList();
</script>

<style scoped>
    .header-row {
        margin-bottom: 20px;
    }

    .section-title {
        margin: 20px 0;
        font-weight: bold;
    }

    .el-form-item {
        margin-right: 20px;
    }
</style>
